<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="format-detection" content="email=no" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Cache-Control" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
	<title>血压监测</title>
	<!-- 引入样式文件 -->
	<link rel="stylesheet" href="../../common/css/common.css" />
	<link rel="stylesheet" href="../../common/css/vant-index.css" />
	<link rel="stylesheet" href="../css/monitor.css">
	<link rel="stylesheet" href="../css/bloodprofile1.css">
	<style type="text/css">
		.van-button--info {
			background: #F5F5F5;
			color: #595959;
			border-color: #F5F5F5;
		}

		.van-button--warning {
			color: #FFFFFF;
		}

		.van-icon-arrow:before {
			content: '\e660';
			font-size: 14px;
			transform: rotate(0deg);
		}

		.van-pagination__item:not(:last-child)::after {
			border-right-width: 0;
		}

		.van-hairline--surround::after {
			border-width: 0px;
		}

		.van-cell__value--alone {
			font-size: 14px;
		}

		.van-button--mini {
			font-size: 12px;
		}

		.van-nav-bar__left {
			padding: 0 5px;
		}

		.van-nav-bar__right {
			padding: 0 10px;
		}
	</style>
	<!-- 引入 Vue 和 Vant 的 JS 文件 -->
	<script src="../../common/js/vue.min.js"></script>
	<script src="../../common/js/axios.min.js"></script>
	<script src="../../common/js/vue.global.prod.js"></script>

</head>

<body>
	<div id="app" v-cloak>
		<van-nav-bar title="血压监测" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
			<template #right>
				<van-icon name="wap-home-o" size='18' />
			</template>
		</van-nav-bar>
		<div class="bs_echart">
			<div class="bp_title flex">
				<div class="bp_title_main">
					<p>血压曲线</p>
				</div>
				<div class="bp_title_tips">
					<ul>
						<li><span style="background:#BAE7FF;"></span>
							<p>40-60</p>
						</li>
						<li><span style="background: #D9F7BE;"></span>
							<p>60-140</p>
						</li>
						<li><span style="background: #FFCCC7;"></span>
							<p>>140</p>
						</li>
					</ul>
				</div>
			</div>

			<div class="shadow">
				<div class="echart_tabs bp_tabs flex">
					<van-button v-for='item in period' round type="info" size="mini" :key="'period_'+item.key"
						:class="['filter-item', (selected.chart == item.key) ? 'van-button--warning' : '']"
						@click="handleGetCharts(item.key)">{{item.value}}</van-button>
				</div>
				<div class="" v-if="showchart==true">
					<line-charts :key="initCharts" :x-axis-data="charts.axisData" :y-axis-unit="charts.axisUnit"
						:visual-map="charts.visualMap" :legend="charts.legend" :show-legend-arr="charts.showLegend"
						:series-data="charts.seriesData" :add-line="true" :line-style="charts.lineStyle"
						:add-area="true" :area-style="charts.areaStyle"></line-charts>
				</div>
				<div v-if='showchart==false' class="none_info">
					<img src="../img/bloodprofile/none.png" />
					<p>— 暂无数据 —</p>
				</div>
			</div>
		</div>

		<!--<div class="bs_statistics">
			<div class="bp_title flex">
				<div class="bp_title_main">
					<p>血压统计</p>
				</div>
			</div>

            <div class="shadow">
            		<div class="bs_statistics_tabs bp_tabs flex">
            			<van-button v-for='item in period' round type="info" size="mini" :key="'period_'+item.key"  :class="['filter-item', (selected.statistics == item.key) ? 'van-button--warning' : '']" @click="handleGetStatistics(item.key)">{{item.value}}</van-button>
				</div>
				<div class="statistics_main">
					<ul>
						<li>
							<p class="statistics_main_title">平均血压(mmHg)</p>
							<p class="avg">{{avgValue}}/{{avgValue2}}</p>
						</li>
						<li>
							<p class="statistics_main_title">最高值(mmHg)</p>
							<p class="highest">{{highestValue}}/{{highestValue2}}</p>
						</li>
						<li>
							<p class="statistics_main_title">最低值(mmHg)</p>
							<p class="lowest">{{lowestValue}}/{{lowestValue2}}</p>
						</li>
						<li>
							<p class="statistics_main_title">偏高次数</p>
							<p class="highnum">{{highCounts}}</p>
						</li>
						<li>
							<p class="statistics_main_title">正常次数</p>
							<p class="normalnum">{{normalCounts}}</p>
						</li>
						<li>
							<p class="statistics_main_title">偏低次数</p>
							<p class="lownum">{{lowCounts}}</p>
						</li>
					</ul>
	            	</div>
            </div>
        </div>
    -->
		<div class="bs_records">
			<div class="diet_header">
				<van-cell @click="showPopup" is-link>{{columnsValue}}</van-cell>
				<van-popup v-model:show="show" position="bottom" :style="{ height: '45%' }">
					<van-picker show-toolbar title="时间选择" :columns="columns" :default-index="0" @cancel="show = false"
						@confirm="onConfirm" />
				</van-popup>
			</div>
			<div class="diet_body">
				<van-list v-if="recordnothing==1" v-model="loading" :finished="finished" finished-text="没有更多了">
					<van-cell center v-for="item in list" :key="item">
						<div class="item_list">
							<img id="dietIcon" style="float: left;" src="../img/bloodprofile/blood.png" alt="">
							<div class="diet_content">
								<div class="diet_type flex">
									<span v-if="!item.type">血压</span>
									<span v-if="item.type==1">早血压</span>
									<span v-if="item.type==2">晚血压</span>
									<span v-if="item.pluse!=0">{{item.high}}/{{item.low}}/{{item.pluse}}</span>
									<span v-if="item.pluse==0">{{item.high}}/{{item.low}}/-</span>
								</div>
								<span style="color: rgba(0,0,0,0.65);font-size:13px">{{item.time}}</span>
								<div v-if="item.recordPhoto" class="diet_photo">
									<ul>
										<li :key="index" v-for="item1 in item.recordPhoto">
											<img :src="item1" />
										</li>
									</ul>
								</div>
							</div>
						</div>
					</van-cell>
				</van-list>
				<van-list v-if="recordnothing==2">
					<div class="none_info">
						<img src="../img/bloodprofile/none.png" />
						<p>当前没有打卡记录哦</p>
					</div>
				</van-list>
				<van-pagination v-model="currentPage" @click="handleBloodCurrentChange" :page-count="totalPage"
					mode="simple" />
			</div>

		</div>

	</div>
</body>

<script src="../js/echarts.min.js"></script>
<script src="../../base.js"></script>
<script src="../../common/js/vant.min.js"></script>
<script type="module">
	import {
		getAction,
		postAction,
		getUrl,
		spliceUrl,
	} from "../../common/js/api/vue3-axios-utils.js";

	import { lineCharts, uuid } from "../js/charts-components.js"

	const app = Vue.createApp({
		data() {
			return {
				initCharts: 'init-blood-press',
				charts: {
					axisData: [],
					axisUnit: '',
					legend: [
						"收缩压",
						"舒张压",
						"心率"
					],
					showLegend: [],
					seriesData: [],
					lineStyle: [
						{
							index: 0,
							lineColor: "#f06980",
							textColor: "#4d4d4d",
							data: [60, 140],
						}
					],
					areaStyle: [{
						index: 0,
						color: '#EEF9FF',
						data: [40, 60],
					}, {
						index: 1,
						color: '#F5FDEF',
						data: [60, 140],
					}, {
						index: 2,
						color: '#FFF2F1',
						data: [140, 160],
					}

					]
				},
				recordDataSource: [],
				statisticsDataSource: [],
				url: {
					getCharts: "/101/05/1010501",
					getRecords: "/101/05/1010502",
					getStatistics: "/101/05/1010503",
				},
				period: [{ key: 2, value: '最近两周' }, { key: 3, value: '最近一个月' }, { key: 5, value: '最近三个月' }, { key: 0, value: '全部' }],
				chartDataLoading: true,
				recordDataLoading: true,
				statisticsDataLoading: true,
				selected: {
					chart: 2,
					statistics: 2,
					record: 2
				},
				paginationShow: true,
				showchart: true,
				columns: ['最近两周', '最近一个月', '最近三个月', '全部'],
				columnsValue: '最近两周',
				recordnothing: 1,
				avgValue: '-',
				avgValue2: '-',
				highestValue: '-',
				highestValue2: '-',
				lowestValue: '-',
				lowestValue2: '-',
				highCounts: '-',
				lowCounts: '-',
				normalCounts: '-',
				show: false,
				loading: false,
				finished: false,
				currentPage: 1,
				totalPage: 0,
				pageSize: 10,
				list: [],
			}
		},
		components: {
			lineCharts: lineCharts
		},
		methods: {
			async init() {
				await this.handleGetCharts(this.selected.chart)
				await this.handleGetRecords(this.selected.record)
				await this.handleGetStatistics(this.selected.statistics)
			},
			showPopup() {
				this.show = true
			},
			onConfirm(value, index) {
				console.log(value, index);
				this.columnsValue = value
				this.show = false
				if (index == 0) {
					this.selected.record = 2
					this.selected.chart = 2
				}
				if (index == 1) {
					this.selected.record = 3
					this.selected.chart = 3
				}
				if (index == 2) {
					this.selected.record = 5
					this.selected.chart = 5
				}
				if (index == 3) {
					this.selected.record = 0
					this.selected.chart = 0
				}
				this.handleGetRecords(this.selected.record)
				this.handleGetCharts(this.selected.chart)
			},
			handleGetCharts(period) {
				this.chartDataLoading = true;
				this.charts.axisData = []
				this.charts.seriesData = []
				if (period !== this.selected.chart) {
					this.selected.chart = period;
					this.selected.record = period
					for (var k = 0; k < this.period.length; k++) {
						if (period == this.period[k].key) {
							this.columnsValue = this.period[k].value
						}
					}
					this.handleGetRecords(this.selected.record)
				}
				postAction(spliceUrl(this.url.getCharts), { period: period, patientId: localStorage.pid, type: 3 }).then((res) => {
					res = res.data
					if (res.success) {
						console.log("getCharts:", res)
						if (res.result.dates.length > 0) {
							this.showchart = true
							for (var i = 0; i < res.result.dates.length; i++) {
								res.result.dates[i] = res.result.dates[i].substr(5, 11)
							}
							this.charts.axisData = res.result.dates || []
							this.charts.seriesData = res.result.value || []
							// 延迟500毫秒刷新统计图
							setTimeout(() => {
								this.initCharts = uuid()
							}, 500);
							console.log('charts', this.charts)
						} else {
							this.showchart = false
						}
					}
					if (res.code === 510) {
						this.$message.warning(res.message)
					}
					this.chartDataLoading = false;
				})
			},
			handleGetRecords(period) {
				this.recordDataLoading = true;
				postAction(spliceUrl(this.url.getRecords), { period: period, patientId: localStorage.pid, page: this.currentPage, pageSize: this.pageSize, type: 3 }).then((res) => {
					res = res.data
					if (res.success) {
						console.log("getRecords:", res)
						if (res.result.recordList && res.result.count > 0) {
							this.recordnothing = 1
							this.paginationShow = true
							this.totalPage = res.result.totalPage;
							this.list = res.result.recordList
							for (let i = 0; i < res.result.recordList.length; i++) {
								if (res.result.recordList[i].recordPhoto) {
									res.result.recordList[i].recordPhoto = res.result.recordList[i].recordPhoto.split(",");
								}
							}
							this.list = res.result.recordList
						} else {
							this.recordnothing = 2
							this.paginationShow = false
							this.totalPage = res.result.totalPage;
							this.list = []
						}


					}
					if (res.code === 510) {
						this.$message.warning(res.message)
					}
					this.recordDataLoading = false;
				})
			},
			handleBloodCurrentChange() {
				this.handleGetRecords(this.selected.record);
			},
			handleGetStatistics(period) {
				if (period !== this.selected.statistics) {
					this.selected.statistics = period;
				}
				this.statisticsDataLoading = true;
				getAction(spliceUrl(this.url.getStatistics), { period: period, patientId: localStorage.pid, type: 3 }).then((res) => {
					res = res.data
					if (res.success) {
						console.log("getstatistics:", res)
						if (res.result != '') {
							this.avgValue = res.result.statistics.avgValue
							this.avgValue2 = res.result.statistics.avgValue2
							this.highestValue = res.result.statistics.highestValue
							this.highestValue2 = res.result.statistics.highestValue2
							this.lowestValue = res.result.statistics.lowestValue
							this.lowestValue2 = res.result.statistics.lowestValue2
							this.highCounts = res.result.statistics.highCounts
							this.lowCounts = res.result.statistics.lowCounts
							this.normalCounts = res.result.statistics.normalCounts
						} else {
							this.avgValue = '-'
							this.avgValue2 = '-'
							this.highestValue = '-'
							this.highestValue2 = '-'
							this.lowestValue = '-'
							this.lowestValue2 = '-'
							this.highCounts = '-'
							this.lowCounts = '-'
							this.normalCounts = '-'
						}

						this.statisticsDataSource = res.result.records || res.result;
					}
					if (res.code === 510) {
						this.$message.warning(res.message)
					}
					this.statisticsDataLoading = false;
				})
			},
			onClickLeft() {
				window.location.href = '../dailyIndex.html?userid='+localStorage.pid
			},
			onClickRight() {
				window.location.href = '../index.html?userid=' + localStorage.pid
			},
		},
		created() {
			this.init()
		},
	});

	app.use(vant);


	app.use(vant.Lazyload);


	app.mount('#app');
</script>

</html>